import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { Form, Tooltip, Collapse } from 'antd';
import moment from 'moment';
import useSlickTableTemp from '@/hooks/useSlickTableTemp';
import SlickTable from '@/components/SlickTable';

function ProcessRecords(props) {
  const [params, setParams] = useState({ busiObjId: props.objInstId, busiType: props.objType });

  // 初始化
  useEffect(() => {
    if (props.objInstId && props.objType) {
      setParams({ busiObjId: props.objInstId, busiType: props.objType });
    }
  }, [props.objInstId, props.objType]);

  // 初始化表格数据
  const { tableProps } = useSlickTableTemp(
    {
      pageSize: 100,
    },
    'pmc/pms/PmOrderWorkController/flowExec/history',
    params
  );

  const cellStyle = {
    maxWidth: 200,
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
    cursor: 'pointer',
  };

  const columns = [
    {
      title: '流程环节',
      dataIndex: 'flowNodeName',
    },
    {
      title: '处理人',
      dataIndex: 'dealStaffName',
    },
    {
      title: '联系电话',
      dataIndex: 'linkPhone',
    },
    {
      title: '处理时间',
      dataIndex: 'updateDate',
      render: text => (text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : null),
    },
    {
      title: '处理状态',
      dataIndex: 'statusCdName',
    },
    {
      title: '处理结果',
      dataIndex: 'auditPassName',
    },
    {
      title: '处理意见',
      dataIndex: 'dealContent',
      onCell: () => {
        return {
          style: cellStyle,
        };
      },
      render: text => (
        <Tooltip placement="topLeft" title={text}>
          {text}
        </Tooltip>
      ),
    },
  ];

  return (
    <Collapse className="cute" defaultActiveKey={['1']} bordered={false} expandIconPosition="right">
      <Collapse.Panel header="处理记录" key="1">
        <SlickTable
          rowKey={record => record.order_id}
          columns={columns}
          {...tableProps}
          pagination={false}
          bordered={false}
        />
      </Collapse.Panel>
    </Collapse>
  );
}

export default connect(({ setting }) => ({
  size: setting.size,
}))(Form.create()(ProcessRecords));
